<template>
  <div class="demo-app">
    <div class="demo-app-main">
      <FullCalendar ref="calendar" class="demo-app-calendar" :options="calendarOptions">
        <template v-slot:eventContent="arg">
          <div class="information-content">
            <i class="el-icon-bell">{{ arg.event.title }}</i>
          </div>
        </template>
      </FullCalendar>
    </div>
    <div class="demo-app-sidebar">
      <div class="demo-app-sidebar-section">
        <el-row>
          <el-switch
            @change="weekchange"
            v-model="week"
            active-text="切换周末"
            style="float: left; margin-bottom: 24px; margin-top: 20px"
          />
        </el-row>
        <el-row :gutter="5" class="buttonList">
          <el-col :span="12">
            <el-button type="primary" icon="el-icon-s-data" @click="scheduleList">日程\任务列表</el-button>
          </el-col>
          <el-col :span="12">
            <el-button
              plain
              type="primary"
              icon="el-icon-plus"
              @click="scheduleVisible = true"
            >新建日程\任务</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="demo-app-sidebar-section">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="我的任务" name="task"></el-tab-pane>
          <el-tab-pane label="我的创建" name="allocation"></el-tab-pane>
          <el-tab-pane label="我的日程" name="schedule"></el-tab-pane>
        </el-tabs>
        <div v-for="schedule in scheduleTasks" :key="schedule.scheduleId" style="padding:10px">
          <ul class="infinite-list" style="overflow:auto">
            <div style="padding: 5px">
              <div class="card-title">
                <span>
                  <el-link
                    @click="particulars(schedule.scheduleId)"
                    type="primary"
                  >{{schedule.scheduleTitle}}</el-link>
                </span>
              </div>
              <div class="bottom clearfix card-item">
                <span class="item-right">
                  <span class="information-content" style="display:inline-block;padding-bottom:5px">
                    {{schedule.startTime}}至
                    {{schedule.endTime}}
                  </span>
                </span>
              </div>
            </div>
          </ul>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <!-- scheduleForm -->
    <addCalender
      :model="model"
      :time="time"
      :formPrev="form"
      :radioVal="radio"
      :functionaryPrev="functionary"
      @handleClick="handleClick"
      @fCancel="scheduleVisible = false"
      @fSubmit="fSubmit"
      @scheduleclose="scheduleclose"
      :scheduleVisiblePreve="scheduleVisible"
    ></addCalender>
    <el-dialog
      :title="viewModel.scheduleType == 'task' ? '任务信息' : '日程信息'"
      :visible.sync="viewShedule"
      width="30%"
      @closed="viewSheduleclose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-row v-if="viewModel.scheduleType == 'task'">任务标题：{{ this.viewModel.scheduleTitle }}</el-row>
      <el-row v-else>日程标题：{{ this.viewModel.scheduleTitle }}</el-row>
      <el-row
        v-if="viewModel.scheduleType != 'task'"
        style="margin-top: 10px"
      >日程类型：{{ this.viewModel.scheduleType }}</el-row>
      <el-row style="margin-top: 10px">位 置：{{ this.viewModel.adrress }}</el-row>
      <el-row style="margin-top: 10px">
        起止时间：{{ this.viewModel.startTime }} -
        {{ this.viewModel.endTime }}
      </el-row>
      <el-row style="margin-top: 10px">开始提醒：{{ this.viewModel.startWarnType }}</el-row>
      <el-row style="margin-top: 10px">
        负责人：
        <template v-for="user in participant">
          <el-tag
            type="warning"
            effect="dark"
            v-if="user.userType == 'principal'"
            :key="user.userName"
            style="margin: 5px"
          >{{ user.userName }}</el-tag>
        </template>
      </el-row>
      <el-row style="margin-top: 10px">
        参与人：
        <template v-for="user in participant">
          <el-tag
            effect="dark"
            v-if="user.userType == 'participant'"
            :key="user.userName"
            style="margin: 5px"
          >{{ user.userName }}</el-tag>
        </template>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button style="width: 20%;" @click="particulars(viewModel.scheduleId)">任务详情</el-button>
        <el-button style="width: 20%;" :hidden="!bool" @click="editSchedule">编辑</el-button>
        <el-button style="width: 20%;" :hidden="!bool" type="primary" @click="deleteSchedule">删除</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="viewModel.scheduleTitle"
      :visible.sync="particularsview"
      width="30%"
      @closed="particularsclose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-tabs v-model="particularName" @tab-click="particularClick">
        <el-tab-pane label="安排详情" name="detail">
          <el-row style="margin-top: 10px">位 置：{{ this.viewModel.adrress }}</el-row>
          <el-row style="margin-top: 10px">
            起止时间：{{ this.viewModel.startTime }} -
            {{ this.viewModel.endTime }}
          </el-row>
          <el-row style="margin-top: 10px">开始提醒：{{ this.viewModel.startWarnType }}</el-row>
          <el-row style="margin-top: 10px">结束提醒：{{ this.viewModel.endWarnType }}</el-row>
          <el-row style="margin-top: 10px">
            负责人：
            <template v-for="user in participant">
              <el-tag
                type="warning"
                effect="dark"
                v-if="user.userType == 'principal'"
                :key="user.userName"
                style="margin: 5px"
              >{{ user.userName }}</el-tag>
            </template>
          </el-row>
          <el-row style="margin-top: 10px">
            参与人：
            <template v-for="user in participant">
              <el-tag
                effect="dark"
                v-if="user.userType == 'participant'"
                :key="user.userName"
                style="margin: 5px"
              >{{ user.userName }}</el-tag>
            </template>
          </el-row>
          <el-row style="margin-top: 10px">关联类型：{{ this.viewModel.dataType }}</el-row>
          <el-row style="margin-top: 10px">关联业务名称：{{ this.viewModel.dataTitle }}</el-row>
          <el-row style="margin-top: 10px">详细描述：{{ this.viewModel.memo }}</el-row>
          <el-row
            v-if="activeName == 'task'"
            style="margin-top: 10px"
          >任务完成情况：{{ this.viewModel.taskStatus }}</el-row>
          <el-row>
            <el-col :span="24">
              <qm-file-upload
                :dataKey="this.viewModel.scheduleId"
                title="附件上传"
                :editable="false"
                fileSize="20"
                fileType=".jpg,.png,.doc,.docx,.xls,.xlsx,.pdf,.txt,.zip,.rar"
                @uploaded="uploadSuccess"
                viewType="office"
              ></qm-file-upload>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane v-if="activeName == 'task'" label="处理情况" name="dispose">
          <div v-for="item in results" :key="item.resultId" style="margin-top: 10px">
            <el-row>
              <el-button
                style="width: 35%;"
                type="info"
                icon="el-icon-user-solid"
                circle
              >{{ item.userId }}</el-button>
            </el-row>
            <el-row>完成情况：{{ item.taskStatus }}</el-row>
            <el-row>登记时间{{ item.finishDate }}</el-row>
            <el-row>详细描述：{{ item.memo }}</el-row>
          </div>
          <template>
            <el-button style="margin-top: 10px;width: 20%;" type="primary" @click="sendUp = true">
              上报
              <i class="el-icon-edit"></i>
            </el-button>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="上报信息"
      @closed="taskClose"
      :visible.sync="sendUp"
      width="30%"
    >
      <el-form
        :model="task"
        :rules="taskrules"
        ref="task"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="完成情况" prop="taskStatus">
          <el-select v-model="task.taskStatus" placeholder="请选择">
            <el-option
              v-for="item in taskStatusoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细说明" prop="memo">
          <el-input
            type="textarea"
            maxlength="500"
            :autosize="{ minRows: 4, maxRows: 8 }"
            placeholder="填写详细的描述(0/500字)"
            v-model="task.memo"
          ></el-input>
        </el-form-item>
        <el-form-item label="登记时间" prop="finishDate">
          <el-date-picker v-model="task.finishDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button style="width: 20%;" @click="sendUp = false">取 消</el-button>
        <el-button style="width: 20%;" type="primary" @click="taskSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";
import zhCn from "@fullcalendar/core/locales/zh-cn";
import _ from "lodash";
import request from "@/utils/request";
// 组件
import addCalender from "./addCalender.vue";
import QmFileUpload from "@/libs/components/qm-file-upload";

export default {
  components: {
    FullCalendar, // make the <FullCalendar> tag available
    QmFileUpload,
    addCalender,
  },
  created: function () {
    this.getModel();
    // 接收事件
    this.$base.$on("fSubmit", this.fSubmit);
    // this.getRepeatoptions();
  },
  data: function () {
    return {
      model: null,
      calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          listPlugin,
          interactionPlugin, // needed for dateClick
        ],
        // headerToolbar: {
        //   left: "prevYear,prev,next,nextYear today",
        //   center: "title",
        //   right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
        // },
        headerToolbar: {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth",
        },
        dayMaxEventRows: false, // 开启设置最大视图条数
        views: {
          timeGrid: {
            dayMaxEventRows: 6, // adjust to 6 only for timeGridWeek/timeGridDay
          },
        },
        // businessHours: true, // display business hours 默認設置工作時間和日期
        // businessHours: {
        //   // days of week. an array of zero-based day of week integers (0=Sunday)   true
        //   dow: [1,2,3,4,5], // Monday - Fri
        //   start: "09:00", // a start time (09am in this example)
        //   end: "18:00", // an end time (6pm in this example)
        //   overlap: false,
        //   rendering: "background", //自定背景色
        //   color: "#ffffe0",
        // },
        firstDay: 1, //设置一周中显示的第一天是哪天，周日是0，周一是1，类推
        // isRTL: false, //设置为ture时则日历从右往左显示
        // hiddenDays: [], //隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。
        weekMode: "variable", //在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定
        weekNumbers: true, //是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。
        // weekNumberCalculation: "iso", //周次的显示格式。
        //height:600,//设置日历的高度，包括header日历头部，默认未设置，高度根据aspectRatio值自适应。
        //contentHeight://设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应。
        aspectRatio: 1.35, //设置日历单元格宽度与高度的比例。
        handleWindowResize: true, //是否随浏览器窗口大小变化而自动变化。
        nowIndicator: true, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
        showNonCurrentDates: false, //可选日期范围,false只选当前月
        // dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //同理monthNames
        // dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //同理monthNamesShort
        // weekNumberTitle: "周", //周的国际化,默认为"W"
        navLinks: false, // 当前周是否可以被点击，默认false，如果为true则周视图“周几”被点击之后进入日视图。
        // lazyFetching : true,        //是否启用懒加载技术--即只取当前条件下的视图数据，其它数据在切换时触发，默认true只取当前视图的，false是取全视图的
        defaultAllDayEventDuration: { days: 1 }, //默认1天是多长，（有的是采用工作时间模式，所以支持自定义）
        eventColor: "#3BB2E3", // 全部日历日程背景色
        themeSystem: "bootstrap", // 主题色(本地测试未能生效)
        initialView: "dayGridMonth",
        events: this.evenss,
        // function (start, callback) {
        //可自定义查询时间范围和上一个月，下一个月联用
        // var even = [];
        // request({
        //   url: "/admin/scheduleTask/getAllScheduleTask",
        //   method: "post",
        //   data: {
        //     startTime: formatter.formatDateTime(start.startStr),
        //     endTime: formatter.formatDateTime(start.endStr),
        //   },
        // })
        //   .then((r) => {
        //     if (r && !r.initMessage) {
        //       even = r.parameters.schdule;
        //       callback(even);
        //     } else {
        //       this.$message.error(r.initMessage || "数据请求失败");
        //     }
        //   })
        //   .catch((e) => {
        //     this.$message.error(e);
        //   });
        // },
        editable: true,
        eventDrop: this.eventdrop,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents,
        locale: zhCn,
        // you can update a remote database when these fire:
        eventAdd: this.eventAdd,
        eventChange: this.eventChange,
        eventRemove: this.eventRemove,
      },
      currentEvents: [],
      //日程弹框状态
      scheduleVisible: false,
      viewShedule: false,
      repeatoptions: [
        {
          value: "everyday",
          label: "每天",
        },
        {
          value: "everyTuesday",
          label: "每周二",
        },
        {
          value: "every30",
          label: "每月30日",
        },
        {
          value: "weeks",
          label: "周(勿跨天)",
        },
        {
          value: "customCycle",
          label: "自定义周期",
        },
      ],
      taskStatusoptions: [
        {
          value: "finished",
          label: "已完成",
        },
        {
          value: "unfinished",
          label: "未完成",
        },
        {
          value: "postpone",
          label: "推迟",
        },
      ],
      form: {
        parentId: "",
        scheduleType: "",
        scheduleTitle: "",
        adrress: "",
        startTime: "",
        endTime: "",
        isRepeat: null,
        repeatType: "",
        repeatTimes: "",
        repeatWeeks: "",
        repeatEndType: "",
        repeatStarDate: "",
        repeatEndDate: "",
        startWarnType: "",
        endWarnType: "",
        dataType: "",
        dataKey: null,
        dataTitle: null,
        memo: "",
        taskFinishType: "",
        taskStatus: "",
        //附件id
        attachmentIds: null,
      },
      scheduleRules: {
        scheduleTitle: [
          { required: true, message: "请填写标题", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在1-50 个字符以内",
            trigger: "blur",
          },
        ],
        adrress: [
          { required: true, message: "请填写地址", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在1-50 个字符以内",
            trigger: "blur",
          },
        ],
        //日程类别
        scheduleType: [
          { required: true, message: "请选择日程类型", trigger: "change" },
        ],
        startWarnType: [
          {
            required: true,
            message: "请选择开始提醒类型",
            trigger: "change",
          },
        ],
        endWarnType: [
          {
            required: true,
            message: "请选择结束提醒类型",
            trigger: "change",
          },
        ],
        memo: [
          { required: true, message: "请填写详细描述", trigger: "blur" },
          {
            min: 1,
            max: 500,
            message: "长度在1-500 个字符以内",
            trigger: "blur",
          },
        ],
        //任务完成情况
        taskStatus: [
          {
            required: true,
            message: "请选择任务完成情况",
            trigger: "change",
          },
        ],
      },
      task: {
        scheduleId: null,
        taskStatus: null,
        memo: null,
        finishDate: null,
      },
      taskrules: {
        memo: [
          { required: true, message: "请填写详细描述", trigger: "blur" },
          {
            min: 1,
            max: 500,
            message: "长度在1-500 个字符以内",
            trigger: "blur",
          },
        ],
        taskStatus: [
          { required: true, message: "请选择完成情况", trigger: "blur" },
        ],
        finishDate: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "blur",
          },
        ],
      },
      //负责人员
      functionary: [
        {
          userType: null,
          userName: [],
        },
      ],
      time: [],
      //参与人员
      participant: [{ userName: "" }],
      //用于附件的dataKey
      scheduleId: null,
      //克隆的数据
      viewModel: {
        parentId: "",
        scheduleType: "",
        scheduleTitle: "",
        adrress: "",
        startTime: "",
        endTime: "",
        isRepeat: null,
        repeatType: "",
        repeatTimes: "",
        repeatEndType: "",
        repeatEndDate: "",
        startWarnType: "",
        endWarnType: "",
        dataType: "",
        dataKey: "",
        dataTitle: "",
        memo: "",
        taskFinishType: "",
        taskStatus: "",
        //附件id
        attachmentIds: null,
      },
      //删除的对象
      clickInfo: null,
      //切换周末
      week: "",
      //区分创建还是分配人
      bool: null,
      //默认显示我分配的
      activeName: "task",
      scheduleTasks: null,
      //日程详情
      particularsview: false,
      particularName: "detail",
      //处理情况
      sendUp: false,
      results: null,

      //radio按钮
      radio: "日程",
      //关联项目下拉框数据
      contractOptions: [],
      //重复周
      repeatWeek: [],

      //记录组件的开始结束时间
      starX: null,
      endX: null,
    };
  },
  methods: {
    scheduleclose() {
      this.functionary = [
        {
          userType: null,
          userName: [],
        },
      ];
      //清空数据
      this.form = this.$options.data().form;
      this.scheduleVisible = false;
      // this.form = _.extend({}, this.model);
    },
    fSubmit(r) {
      let calendarApi = this.$refs["calendar"].getApi().view.calendar;
      calendarApi.unselect(); // clear date selection
      if (r.action == "edit") {
        this.clickInfo.event.remove();
      }
      var star = formatter.formatDate(r.data.startTime);
      var end = formatter.formatDate(r.data.endTime);
      if (star == end) {
        calendarApi.addEvent({
          id: r.data.scheduleId,
          title: r.data.scheduleTitle,
          start: r.data.startTime,
          end: r.data.endTime,
          color: "#CC33FF",
          allDay: true,
        });
      } else {
        calendarApi.addEvent({
          id: r.data.scheduleId,
          title: r.data.scheduleTitle,
          start: r.data.startTime,
          end: r.data.endTime,
          color: "#CC33FF",
        });
      }
      this.scheduleVisible = false;
    },
    eventAdd() {},
    eventChange() {},
    eventRemove() {},
    getModel() {
      request({
        url: "/admin/scheduleTask/getEntity",
        method: "post",
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.model = r.models.model;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    getRepeatoptions() {
      request({
        url: "/admin/sysDictItem/listItemByTypeCode",
        method: "get",
        params: {
          code: "RepetitionType",
        },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.repeatoptions = r.parameters.dictItems;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    evenss(start, callback) {
      this.starX = formatter.formatDate(start.startStr);
      this.endX = formatter.formatDate(start.endStr);
      //  可自定义查询时间范围和上一个月，下一个月联用
      var even = [];
      request({
        url: "/admin/scheduleTask/getAllScheduleTask",
        method: "post",
        data: {
          startTime: formatter.formatDateTime(start.startStr),
          endTime: formatter.formatDateTime(start.endStr),
        },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            even = r.parameters.schdule;
            callback(even);
            this.handleClick();
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    taskClose() {
      this.$refs["task"].resetFields();
    },
    taskSubmit() {
      this.$refs["task"].validate((valid) => {
        if (valid) {
          this.task.scheduleId = this.viewModel.scheduleId;
          this.task.finishDate = formatter.formatDateTime(this.task.finishDate);
          request({
            url: "/admin/scheduleResult/addScheduleResult",
            method: "post",
            data: {
              task: this.task,
            },
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.sendUp = false;
                this.$message({
                  type: "success",
                  message: "上报成功!",
                });
                this.getScheduleResult();
              } else {
                this.$message.error(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              this.$message.error(e);
            });
        } else {
          return false;
        }
      });
    },
    getScheduleResult() {
      request({
        url: "/admin/scheduleResult/getScheduleResult",
        method: "get",
        params: {
          scheduleId: this.viewModel.scheduleId,
        },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.results = r.parameters.results;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    particularClick(tab) {
      if (tab.name == "dispose") {
        this.getScheduleResult();
      }
    },
    //我的任务
    getTask(star, end) {
      request({
        url: "/admin/scheduleTask/getTask",
        method: "get",
        params: { star: star, end: end, type: "task" },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.scheduleTasks = r.parameters.scheduleTasks;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    //我的日程
    getAllocation(star, end) {
      request({
        url: "/admin/scheduleTask/getTask",
        method: "get",
        params: { star: star, end: end, type: "schedule" },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.scheduleTasks = r.parameters.scheduleTasks;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    //我的创建
    getAllocation2(star, end) {
      request({
        url: "/admin/scheduleTask/getAllocation",
        method: "get",
        params: { star: star, end: end },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.scheduleTasks = r.parameters.scheduleTasks;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    particularsclose() {
      this.particularName = "detail";
    },
    //任务详情
    particulars(id) {
      request({
        url: "/admin/scheduleTask/getSome",
        method: "get",
        params: {
          scheduleId: id,
        },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.viewModel = r.parameters.scheduleTask;
            this.participant = r.parameters.users;
            this.particularsview = true;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    handleClick() {
      //我分配的
      if (this.activeName == "schedule") {
        this.getAllocation(this.starX, this.endX);
      } else if (this.activeName == "task") {
        this.getTask(this.starX, this.endX);
      } else {
        this.getAllocation2(this.starX, this.endX);
      }
    },
    //切换周末
    weekchange(value) {
      this.calendarOptions.weekends = value;
    },
    // view关闭重置
    viewSheduleclose() {
      this.viewModel = this.$options.data().viewModel;
    },
    editSchedule() {
      this.viewShedule = false;
      this.time = [];
      //重新取值赋值
      request({
        url: "/admin/scheduleTask/getScheduleTask",
        method: "get",
        params: {
          scheduleId: this.viewModel.scheduleId,
        },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.form = r.parameters.scheduleTask;
            if (this.form.scheduleType == "task") {
              this.radio = "任务";
            } else {
              this.radio = "日程";
            }
            // this.form.isRepeat = this.form.isRepeat ? true : false;
            //时间
            this.time.push(new Date(this.form.startTime));
            this.time.push(new Date(this.form.endTime));
            //参与人员
            this.functionary = r.parameters.functionary;
            // //附件
            // this.scheduleId = this.form.scheduleId;
            //回显周
            // if (this.form.repeatWeeks != null) {
            //   var dataStrArr = this.form.repeatWeeks.split(","); //分割成字符串数组
            //   this.repeatWeek = dataStrArr.map(Number);
            // }
            this.scheduleVisible = true;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    deleteSchedule() {
      this.$confirm("确定删除此条日程信息吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          request({
            url: "/admin/scheduleTask/deleteScheduleTask",
            method: "post",
            data: {
              scheduleIds: [this.viewModel],
            },
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.viewShedule = false;
                //消除信息
                this.clickInfo.event.remove();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                // 更新任务栏信息
                this.handleClick();
              } else {
                this.$message.error(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              this.$message.error(e);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.viewShedule = false;
        });
    },
    uploadSuccess(attachment) {
      this.form.attachmentIds =
        (this.form.attachmentIds || "") + `,${attachment.attachmentId}`;
    },
    eventchange(value) {
      console.log(value);
    },
    //移动日程触发
    eventdrop(event) {
      //event.delta还包含年、月信息
      //月、周、日视图只需传递2个信息即可
      request({
        url: "/admin/scheduleTask/eventDrop",
        method: "post",
        data: {
          scheduleId: event.event._def.publicId,
          days: event.delta.days,
          milliseconds: event.delta.milliseconds,
        },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            if (r.success) {
              this.$message.success("操作成功");
            } else {
              this.$message.error("操作失败");
            }
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    handleWeekendsToggle() {
      this.calendarOptions.weekends = !this.calendarOptions.weekends; // update a property
    },
    handleDateSelect(selectInfo) {
      this.time = [];
      if (selectInfo.view.type == "dayGridMonth") {
        //设置选中的时间,格式化,个性化设置时间
        this.time.push(selectInfo.startStr + " 06:00:00");
        let q = new Date(selectInfo.end);
        q.setTime(q.getTime() - 24 * 60 * 60 * 1000);
        //设置末尾时间
        this.time.push(formatter.formatDate(q) + " 18:00:00");
      }
      if (selectInfo.view.type == "timeGridWeek") {
        this.time.push(new Date(selectInfo.start));
        this.time.push(new Date(selectInfo.end));
      }
      if (selectInfo.view.type == "timeGridDay") {
        this.time.push(new Date(selectInfo.start));
        this.time.push(new Date(selectInfo.end));
      }
      this.scheduleVisible = true;
    },
    handleEventClick(clickInfo) {
      this.clickInfo = clickInfo;
      request({
        url: "/admin/scheduleTask/getSome",
        method: "get",
        params: {
          scheduleId: clickInfo.event._def.publicId,
        },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.viewModel = r.parameters.scheduleTask;
            this.participant = r.parameters.users;
            this.bool = r.parameters.isBool;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
      this.viewShedule = true;
    },
    handleEvents(events) {
      // this.currentEvents = events;
    },
    radioChange(val) {
      this.form = this.$options.data().form;
      this.functionary = this.$options.data().functionary;
      if (val == "日程") {
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
      } else {
        this.$nextTick(() => {
          this.$refs["taskForm"].clearValidate();
        });
      }
    },
    scheduleList() {
      let route = this.$router.resolve({ path: "/admin/calendar/taskList" });
      window.open(route.href, "_blank");
    },
  },
};
</script>
<style lang='css' scoped>
h2 {
  margin: 0;
  font-size: 16px;
}

ul {
  margin: 0;
  padding: 0 0 0 1.5em;
}

li {
  /* margin: 1.5em 0; */
  padding: 0;
}

b {
  /* used for event dates/times */
  margin-right: 3px;
}

.demo-app {
  display: flex;
  min-height: 100%;
  padding: 10px;
  margin: 10px;
  background: #ffffff;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

.demo-app-sidebar {
  width: 400px;
  line-height: 1;
  background: #eaf2fad3;
}

.demo-app-sidebar-section {
  padding: 1em;
}

.demo-app-main {
  flex-grow: 1;
  padding: 3em;
}

.fc {
  /* the calendar root */
  max-width: 1100px;
  margin: 0 auto;
}
.fc-event-dot {
  background-color: rgb(25, 31, 29);
  /* the calendar root */
  max-width: 1100px;
  margin: 0 auto;
}
[v-cloak] {
  display: none !important;
}
.information-content {
  /* color: #19d3ea; */
  font-size: 14px;
  width: 100%; /*一定要设置宽度，或者元素内含的百分比*/
  white-space: nowrap; /*溢出的部分隐藏*/
  overflow: hidden; /*文本不换行*/
  text-overflow: ellipsis; /*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
}
/* 日期新增按钮 */
.buttonList el-button:nth-child(1) {
  color: #ffffff;
}
.buttonList el-button:nth-child(2) {
  color: #2d87ff;
}
.el-button--small {
  border-radius: 4px;
  width: 100%;
  padding: 10px;
  font-size: 14px;
  text-align: left;
}
/* 事项 */
.el-tabs >>> .el-tabs__content {
  padding: 0;
}
.card-title {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #dee5ed;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  color: #252631;
}
.card-item {
  display: flex;
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  margin-left: -15px;
}
.item-left {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-right: 5px;
  margin-right: 5px;
  border-right: 2px solid #2d87ff;
}
.item-right {
  flex: 7;
  padding-left: 5px;
}
/* 日历 */
.demo-app-calendar >>> .fc-scroller-liquid-absolute::-webkit-scrollbar {
  display: none;
}
</style>
